﻿@model CapokunMvcTest.Models.Song
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    if (Model != null)
    {
        ViewBag.Title = Model.SongId;

        ViewBag.ogTitle = Model.SongId;
        ViewBag.ogType = "capokun:Capoeira_song";
        ViewBag.ogUrl = "http://beta.capokun.com/songs/" + HttpUtility.UrlPathEncode(Model.SongId);
        ViewBag.ogDescription = Capokun.Tools.HtmlRemoval.StripTagsRegex(Model.Content);
    }
    else
    {
        ViewBag.Title = "Chanson introuvable";
    }
}
<section id="contentSongList" class="body">
    <script>
        $(function () {
            $("#tabs").tabs({});
        });
        $(document).ready(function () {
            $('a[href|="#tabs-1"]').click(function () {
                window.location = "@Url.Action("All")";
            });
            $('a[href|="#tabs-2"]').click(function () {
                window.location = "@Url.Action("Favorites")";
            });
            $('a[href|="#tabs-3"]').click(function () {
                window.location = "@Url.Action("Create")";
            });
        });
    </script>
    <div id="tabs">
        <ul>
            <li>
                <a href="#tabs-1">All</a></li>
            <li>
                <a href="#tabs-2">Favorites</a></li>
            <li>
                <a href="#tabs-3">Create a new song</a></li>
        </ul>
        <div id="tabs-1">
            <fb:login-button show-faces="true" width="200" max-rows="1" scope="publish_actions">
            </fb:login-button>
            <fb:add-to-timeline></fb:add-to-timeline>
            <div id="ModelContent">
            </div>
            @if (Model != null)
            {
                <script>
                    var ModelJson = {
                        "SongId": "@Model.SongId",
                        "SubmittedBy": "@Model.SubmittedBy"
                    };
                    var htmlContent = createMVCContent(ModelJson);
                    $("#ModelContent").html(htmlContent);
                </script>
                
                <h2>
                    @Model.SongId
                    @if (!string.IsNullOrEmpty(Model.SongId_en))
                    {
                        <span style="font-size: 0.7em">(@Model.SongId_en)</span>
                    }
                </h2>
                @Html.Raw(Model.Link)
                <br />
                <div class="editor-labelTwoCols">
                    <div class="editor-label">
                        <h3>
                            Portuguese</h3>
                    </div>
                    <div class="editor-label">
                        <h3>
                            English</h3>
                    </div>
                </div>
                <div class="contentTwoCols">
                    <div>@Html.Raw(Model.Content)</div>
                    <div>
                        @if (string.IsNullOrEmpty(Model.Content_en))
                        {
                            <p>
                                <i>Translation not done.<br />
                                    @Html.ActionLink("Add a translation", "Edit/" + Model.SongId, "Song")
                                </i>
                            </p>
                        }
                        else
                        {
                            @Html.Raw(Model.Content_en);
                        }
                    </div>
                </div>
                <br />
                <div data-href="http://www.capokun.com/en-US/songs/@Model.SongId"
                 class="fb-like" data-send="false" data-width="450" data-show-faces="true">
                </div>
            }
            else
            {
                <p>
                    Unknown song</p>
            }
        </div>
        <div id="tabs-2">
        </div>
        <div id="tabs-3">
        </div>
    </div>
</section>
<section id="contentMobile" class="body">
    Mobile device detected!
<br /> <a href="@Url.Content("~/App_EN.htm")" >let's go to the mobile song application
    here</a>
</section>
<div id="dialog-confirm" title="FB Connect?">
    <p>
        <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
        Requires FB Connexion. Connect?</p>
</div>
